hook up 2fa setting

3 files changed, 86 insertions, 19 deletions

diff --git a/src/routes/[username]/dashboard/+page.svelte b/src/routes/[username]/dashboard/+page.svelte
index 969717df..bd5f2bba 100644
--- a/src/routes/[username]/dashboard/+page.svelte
+++ b/src/routes/[username]/dashboard/+page.svelte
@@ -48,7 +48,7 @@
 
 <div class="text-center mx-auto lg:text-left lg:mx-0 lg:ml-[calc(15vw-48px)] mt-12 w-full md:w-72">
 	<h2 class="text-2xl font-semibold">{user.username}</h2>
-	<span class="text-secondary">{$t('user.addressGoesHere')}</span>
+  <span class="text-secondary">{user.address}</span>
 </div>
 
 <div class="px-3 md:px-0 flex justify-center items-center mt-10 lg:mt-0 mb-20">
diff --git a/src/routes/[username]/settings/+page.svelte b/src/routes/[username]/settings/+page.svelte
index aa19c68f..8270ad51 100644
--- a/src/routes/[username]/settings/+page.svelte
+++ b/src/routes/[username]/settings/+page.svelte
@@ -30,7 +30,7 @@
 
 <AppHeader />
 
-<form on:submit|preventDefault={save}>
+<form on:submit|preventDefault={save} class="mb-20">
 	<div class="my-20 px-3 md:px-0 w-full md:w-[400px] mx-auto space-y-8">
 		<h1 class="text-center text-3xl md:text-4xl font-semibold mb-10">
 			{$t('user.settings.header')}
diff --git a/src/routes/[username]/settings/_security.svelte b/src/routes/[username]/settings/_security.svelte
index 65f73a10..dd184fe4 100644
--- a/src/routes/[username]/settings/_security.svelte
+++ b/src/routes/[username]/settings/_security.svelte
@@ -1,18 +1,52 @@
 <script>
-  import { tick } from "svelte";
+	import { tick } from 'svelte';
 	import { t } from '$lib/translations';
-	import { Icon } from '$comp';
+	import { Icon, Qr } from '$comp';
 	import { Pincode, PincodeInput } from 'svelte-pincode';
 	import { user } from '$lib/store';
+	import { put, success, failure } from '$lib/utils';
+
+	let settingPin, setting2fa, disabling2fa;
 
-	let settingPin, setting2fa;
-	let togglePin = () => (settingPin = !settingPin);
-	let toggle2fa = () => (setting2fa = !setting2fa);
 	let code = [];
 	let pin = '';
-  let pinInput;
+	let token = '';
+	let tokenInput, pinInput;
+
+	$: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput);
+	$: if (setting2fa) tokenInput && tick().then(tokenInput.focusFirstInput);
+
+	let togglePin = () => (settingPin = !settingPin);
+	let toggleEnabling = () => (setting2fa = !setting2fa);
+	let toggleDisabling = () => (disabling2fa = !disabling2fa);
 
-  $: if (settingPin) pinInput && tick().then(pinInput.focusFirstInput)
+	$: enable2fa(token);
+	let enable2fa = async (twoFa) => {
+		try {
+			if (setting2fa && token.length === 6) {
+				await put('/enable2fa', { token });
+				success('2fa enabled');
+				$user.twofa = 1;
+        toggleEnabling();
+			}
+		} catch (e) {
+			failure('Failed to enable 2fa, try again');
+		}
+	};
+
+	$: disable2fa(token);
+	let disable2fa = async () => {
+		try {
+			if (disabling2fa && token.length === 6) {
+				await put('/disable2fa', { token });
+				success('2fa disabled');
+				$user.twofa = 0;
+        toggleDisabling();
+			}
+		} catch (e) {
+			failure('Failed to disable 2fa, try again');
+		}
+	};
 </script>
 
 <div>
@@ -23,8 +57,8 @@
 	{#if settingPin}
 		<div class="flex my-4">
 			<div class="mx-auto">
-        <Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
-          <PincodeInput />
+				<Pincode bind:code bind:value={$user.pin} bind:this={pinInput}>
+					<PincodeInput />
 					<PincodeInput />
 					<PincodeInput />
 					<PincodeInput />
@@ -55,16 +89,49 @@
 </div>
 
 {#if setting2fa}
-	QR
+	<Qr text={$user.otpsecret} />
+
+	<div class="text-center my-4">
+		{$t('user.settings.accountId')}<br />
+		<b>{$user.otpsecret}</b>
+	</div>
+	<div class="text-center my-4">
+		{$t('user.settings.oneTimeCode')}<br />
+		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+		</Pincode>
+	</div>
+{:else if disabling2fa}
+	<div class="text-center my-4">
+		{$t('user.settings.oneTimeCode')}<br />
+		<Pincode bind:code bind:value={token} bind:this={tokenInput}>
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+			<PincodeInput />
+		</Pincode>
+	</div>
 {:else}
-	<div>
-		<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
-		<p class="text-secondary mb-1">
-			{$t('user.settings.twofaDescription')}
-		</p>
-		<button type="button" class="primary">
+	<span class="font-bold mb-1">{$t('user.settings.twofa')}</span>
+	<p class="text-secondary mb-1">
+		{$t('user.settings.twofaDescription')}
+	</p>
+	{#if $user.twofa}
+		<button type="button" class="primary" on:click={toggleDisabling}>
+			<Icon icon="mobile" style="mr-1" />
+			{$t('user.settings.twofaDisable')}
+		</button>
+	{:else}
+		<button type="button" class="primary" on:click={toggleEnabling}>
 			<Icon icon="mobile" style="mr-1" />
 			{$t('user.settings.twofaSetup')}
 		</button>
-	</div>
+	{/if}
 {/if}